<template>
  <div>
    <div   id="main"  style="height: 700px;width: 1000px;margin-left: 0px"></div>
  </div>
</template>
<script>

import * as echarts from 'echarts';
import {lineList} from "@/api/stock/stock";
export default {
  name: "KIndex1",
  data() {
    return {
      graphDataVos: [],
      option: [],
      splitData: []
    }
  },
  methods: {
    getList() {
      let symbol = this.$route.query.symbol;
      lineList(symbol).then(response => {
        this.graphDataVos = response.data;
        //alert(JSON.stringify(response.data))
        //this.splitData(this.graphDataVos)
        this.init()
      });
    },
    init() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      const upColor = '#ec0000';
      const upBorderColor = '#8A0000';
      const downColor = '#00da3c';
      const downBorderColor = '#008F28';
// Each item: open，close，lowest，highest



      /*function formatData(data) {
        // 将日期格式从 "yyyy-mm-dd" 转换为 "yyyy/mm/dd" 格式
        const date = data[0].replace(/-/g, '/');

        // 将字符串转换为数值类型
        const open = parseFloat(data[1].replaceAll("\"", ""));
        const close = parseFloat(data[2].replaceAll("\"", ""));
        const low = parseFloat(data[3].replaceAll("\"", ""));
        const high = parseFloat(data[4].replaceAll("\"", ""));

        return [date, open, close, low, high];
      }

// 使用示例
      const originalData = JSON.stringify(this.graphDataVos)
      const formattedData = formatData(originalData);
      */
      const data0 = splitData(JSON.stringify(this.graphDataVos))
      //alert()
      function splitData(rawData) {
       // alert(rawData)
        const categoryData = [];
        const values = [];
        for (var i = 0; i < rawData.length; i++) {
          //categoryData.push(rawData[i].splice(0, 1)[0]);
          //alert(rawData[i])
          values.push(rawData[i]);
        }

        return {
          categoryData: categoryData,
          values: values
        };
      }

      function calculateMA(dayCount) {
        var result = [];
        for (var i = 0, len = data0.values.length; i < len; i++) {
          if (i < dayCount) {
            result.push('-');
            continue;
          }
          var sum = 0;
          for (var j = 0; j < dayCount; j++) {
            sum += +data0.values[i - j][1];
          }
          result.push(sum / dayCount);
        }
        return result;
      }

      option = {
        title: {
          text: '上证指数',
          left: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: data0.categoryData,
          boundaryGap: false,
          axisLine: {onZero: false},
          splitLine: {show: false},
          min: 'dataMin',
          max: 'dataMax'
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 50,
            end: 100
          },
          {
            show: true,
            type: 'slider',
            top: '90%',
            start: 50,
            end: 100
          }
        ],
        series: [
          {
            name: '日K',
            type: 'candlestick',
            data: data0.values,
            itemStyle: {
              color: upColor,
              color0: downColor,
              borderColor: upBorderColor,
              borderColor0: downBorderColor
            },
            markPoint: {
              label: {
                formatter: function (param) {
                  return param != null ? Math.round(param.value) + '' : '';
                }
              },
              data: [
                {
                  name: 'Mark',
                  coord: ['2013/5/31', 2300],
                  value: 2300,
                  itemStyle: {
                    color: 'rgb(41,60,85)'
                  }
                },
                {
                  name: 'highest value',
                  type: 'max',
                  valueDim: 'highest'
                },
                {
                  name: 'lowest value',
                  type: 'min',
                  valueDim: 'lowest'
                },
                {
                  name: 'average value on close',
                  type: 'average',
                  valueDim: 'close'
                }
              ],
              tooltip: {
                formatter: function (param) {
                  return param.name + '<br>' + (param.data.coord || '');
                }
              }
            },
            markLine: {
              symbol: ['none', 'none'],
              data: [
                [
                  {
                    name: 'from lowest to highest',
                    type: 'min',
                    valueDim: 'lowest',
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                      show: false
                    },
                    emphasis: {
                      label: {
                        show: false
                      }
                    }
                  },
                  {
                    type: 'max',
                    valueDim: 'highest',
                    symbol: 'circle',
                    symbolSize: 10,
                    label: {
                      show: false
                    },
                    emphasis: {
                      label: {
                        show: false
                      }
                    }
                  }
                ],
                {
                  name: 'min line on close',
                  type: 'min',
                  valueDim: 'close'
                },
                {
                  name: 'max line on close',
                  type: 'max',
                  valueDim: 'close'
                }
              ]
            }
          },
          {
            name: 'MA5',
            type: 'line',
            data: calculateMA(5),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: 'MA10',
            type: 'line',
            data: calculateMA(10),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: 'MA20',
            type: 'line',
            data: calculateMA(20),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          },
          {
            name: 'MA30',
            type: 'line',
            data: calculateMA(30),
            smooth: true,
            lineStyle: {
              opacity: 0.5
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
    }, mounted() {
      //this.init();

    }, created() {
      this.getList();
    }
}
</script>

<style scoped>

</style>


